<template>
  <input
    type="text"
    v-model="name"
    placeholder="请输入任务名称"
    @keyup.enter="add"
  />
</template>

<script>
export default {
  name: "AddInput",
  data() {
    return {
      name: "",
    };
  },
  methods: {
    add() {
      if (!this.name) {
        alert("请输入任务名称");
        return;
      }
      console.log("this.addTodo", this.addTodo);
      this.addTodo(this.name);
      this.name = "";
    },
  },
  props: {
    addTodo: {
      type: Function,
      required: true,
    },
  },
};
</script>

<style scoped lang="less">
input {
  width: 100%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding-left: 10px;
  box-sizing: border-box;
  outline: none;
  font-size: 16px;
  margin-bottom: 10px;
}
</style>
